<template>
	<div class="wrap">
		<div
			class="active"
			:style="{
				width: curIndex >= 0 ? '70%' : 0
			}"
		>
			<i class="el-icon-error" @click="curIndex = -1"></i>
			<div class="item" v-if="curIndex >= 0">
				<div class="item-hd">
					<div class="name">{{ curPatient.name }}</div>
					<div class="electricityState">
						<div class="battery-indicator">
							<div
								class="battery-container"
								:style="{ '--battery-level': curPatient.batteryValue + '%' }"
							>
								<div
									class="battery-level"
									:class="{ 'low-battery': curPatient.batteryValue < 10 }"
								></div>
								<div class="battery-head"></div>
							</div>
							<span
								class="battery-percent"
								v-if="curPatient.batteryValue != null"
								:class="{ 'low-battery': curPatient.batteryValue < 10 }"
							>
								{{ curPatient.batteryValue }}%
							</span>
						</div>
					</div>
					<div class="flex">
						<img class="pill" src="/img/pill.png" alt="" srcset="" />
						<span>服药</span>
					</div>
					<div class="flex" @click.stop="nursingPlan(curPatient)">
						<img class="pill" src="/img/huli.png" alt="" srcset="" style="width: 25px; margin-right: 5px" />
						<span>护理</span>
					</div>
					<div class="flex" @click.stop="rehabilitationPlan(curPatient)">
						<img class="pill" src="/img/kf.png" alt="" srcset="" style="width: 22px; margin-right: 5px" />
						<span>康复</span>
					</div>
					<div class="flex">
						<img class="addr" src="/img/addr.png" alt="" srcset="" />
						<span>住院范围内</span>
					</div>
				</div>
				<div class="flex">
					<div>心内科</div>
					<div class="ml10">{{ curIndex + 1 }}床</div>
					<div class="ml10">张医生</div>
				</div>
				<div class="item-bd" style="height: calc((35vw - 120px) / 10 * 4 + 20px); flex: none">
					<div class="ecgbox" style="width: calc(35vw - 120px); flex: none">
						<ecg-chart
							:chartData="{
								expectedData: curPatient.ecgData,
								actualData: curPatient.prevEcgData
							}"
							ref="curEcgChart"
						></ecg-chart>
					</div>
					<div class="bpm">
						<div class="num">{{ curPatient.hr }}</div>
						<div>bpm</div>
					</div>
				</div>
				<div class="item-ft">
					<table>
						<tr>
							<th>时间</th>
							<th>药品</th>
							<th>计量</th>
						</tr>
						<tr>
							<td>2025-09-10</td>
							<td>速效救心丸</td>
							<td>0.5ml</td>
						</tr>
					</table>
				</div>
				<!-- <div>{{curPatient}}</div> -->
			</div>
			<div class="map">
				<map-point ref="mappoint" v-if="curIndex >= 0" :point="curPatient.point"></map-point>
			</div>
		</div>
		<div class="list flex-1" :class="{ 'list-xs': curIndex >= 0 }">
			<div
				class="item"
				@click="changeItem(index)"
				v-for="(item, index) in list"
				v-if="index != curIndex"
				:key="index"
			>
				<div class="item-hd">
					<div class="name">{{ item.name }}</div>
					<div class="electricityState">
						<div class="battery-indicator">
							<div class="battery-container" :style="{ '--battery-level': item.batteryValue + '%' }">
								<div class="battery-level" :class="{ 'low-battery': item.batteryValue < 10 }"></div>
								<div class="battery-head"></div>
							</div>
							<span
								class="battery-percent"
								v-if="item.batteryValue != null"
								:class="{ 'low-battery': item.batteryValue < 10 }"
							>
								{{ item.batteryValue }}%
							</span>
						</div>
					</div>
					<div class="flex">
						<img class="pill" src="/img/pill.png" alt="" srcset="" />
						<span>服药</span>
					</div>
					<div class="flex" @click.stop="nursingPlan(item)">
						<img class="pill" src="/img/huli.png" alt="" srcset="" style="width: 25px; margin-right: 5px" />
						<span>护理</span>
					</div>
					<div class="flex" @click.stop="rehabilitationPlan(item)">
						<img class="pill" src="/img/kf.png" alt="" srcset="" style="width: 22px; margin-right: 5px" />
						<span>康复</span>
					</div>
					<div class="flex">
						<img class="addr" src="/img/addr.png" alt="" srcset="" />
						<span>住院范围内</span>
					</div>
				</div>
				<div class="flex">
					<div>心内科</div>
					<div class="ml10">{{ index + 1 }}床</div>
					<div class="ml10">张医生</div>
				</div>
				<div class="item-bd flex-1" v-if="curIndex < 0">
					<div class="ecgbox">
						<ecg-chart
							:chartData="{
								expectedData: item.ecgData,
								actualData: item.prevEcgData
							}"
							:ref="'EcgChart' + index"
						></ecg-chart>
					</div>
					<div class="bpm">
						<div class="num">{{ item.hr }}</div>
						<div>bpm</div>
					</div>
				</div>
			</div>
		</div>
		<planModal ref="planModal"></planModal>
	</div>
</template>

<script>
import { getList } from "@/api/ecgManage/patient";
import request from "@/utils/request";
import mapPoint from "./mapPoint.vue";
import { mapMutations } from "vuex";
import EcgChart from "./EcgChart.vue";
import { debounce } from "@/utils";
import planModal from "@/components/planModal.vue";
let timer = null;
export default {
	data() {
		return {
			patientList: [],
			curIndex: -1,
			list: [],
			getWifi: null
			// curPatient: {}
		};
	},
	components: {
		EcgChart,
		mapPoint,
		planModal
	},
	computed: {
		curPatient() {
			if (this.curIndex > -1) {
				return this.list[this.curIndex];
			} else {
				return {};
			}
		},
		//心电数据
		EcgData() {
			return this.$store.getters.onEvent("ER");
		},
		//心率数据
		HrData() {
			return this.$store.getters.onEvent("HR");
		},
		//病人位置
		location() {
			return this.$store.getters.onEvent("location");
		},
		//电量
		electric() {
			return this.$store.getters.onEvent("Electric");
		}
	},
	watch: {
		EcgData: {
			handler(newValue, oldValue) {
				if (newValue && newValue != oldValue) {
					this.list.forEach((item) => {
						if (item.patientCode == newValue.patientCode) {
							//console.log("old", newValue.data);
							// console.log("packNum", newValue.packNum);
							let newlist = newValue.data.map((item) => {
								return item / 64 / 10 / 2;
							});
							//console.log("new", newlist);
							item.ecgList = [...item.ecgList, ...newlist];
						}
					});
					// console.log(this.list);
				}
			},
			immediate: true, //初始化时让handler调用一下
			deep: true // 开启深度监听
		},
		HrData: {
			handler(newValue, oldValue) {
				if (newValue && newValue != oldValue) {
					this.list.forEach((item) => {
						if (item.patientCode == newValue.patientCode) {
							item.hr = newValue.hr;
						}
					});
				}
			},
			immediate: true, //初始化时让handler调用一下
			deep: true // 开启深度监听
		},
		location: {
			handler(newValue, oldValue) {
				console.log("location", newValue);
				if (newValue && newValue != oldValue) {
					this.list.forEach((item) => {
						if (item.patientCode == newValue.patientCode) {
							// let wl = newValue.wifi.replace(/!/g, ',').replace(/#/g, ';')
							// if (newValue.longitude == 0 || newValue.latitude == 0) {
							// 	this.getAddr(
							// 		{
							// 			...newValue,
							// 			deviceGateWayMac: item.deviceMac
							// 		},
							// 		newValue.patientCode
							// 	);
							// } else {
							// 	item.point = [newValue.longitude / 100, newValue.latitude / 100];
							// }
							let { latitude, longitude } = newValue.location.position.point;
							if (latitude && longitude) {
								item.point = [longitude, latitude];
							}
						}
					});
					console.log(this.list);
				}
			},
			immediate: true, //初始化时让handler调用一下
			deep: true // 开启深度监听
		},
		//电量
		electric: {
			handler(newValue, oldValue) {
				console.log("电量", newValue);
				if (newValue && newValue != oldValue) {
					this.list.forEach((item) => {
						if (item.patientCode == newValue.patientCode) {
							item.batteryValue = newValue.value;
						}
					});
				}
			},
			immediate: true, //初始化时让handler调用一下
			deep: true // 开启深度监听
		}
	},
	created() {
		this.getPatient();
		//默认先清空历史数据
		this.$store.state.eventlist = [];
	},
	mounted() {
		this.RABBITMQ_INIT();
	},
	destroyed() {
		this.destroyConnection();
	},
	methods: {
		...mapMutations(["RABBITMQ_INIT", "destroyConnection"]),
		draw() {
			// 1s 1000条数据 1ms 每次更新16条数据，一共显示4s数据
			timer = setInterval(() => {
				this.list.forEach((item) => {
					let ecg = item.ecgData;
					let prevEcg = item.prevEcgData;
					if (ecg.length >= 3000) {
						prevEcg = ecg.slice(50);
						// .map((item, index) => {
						// 	return {
						// 		name: index + 50,
						// 		value: [index + 50, item]
						// 	};
						// });
						ecg = [];
					}
					let ecgLen = ecg.length;
					ecg = ecg.concat(
						item.ecgList.splice(0, 20).map((item, index) => {
							return {
								name: index + ecgLen,
								value: [index + ecgLen, item]
							};
						})
					);
					if (prevEcg.length >= 20) {
						prevEcg = prevEcg.slice(20);
					} else {
						prevEcg = [];
					}
					item.ecgData = ecg;
					item.prevEcgData = prevEcg;
				});
			}, 40);
		},
		changeItem(index) {
			this.curIndex = index;
			this.$nextTick(() => {
				// this.curPatient()
				//this.$refs.mappoint.createMap()
				// console.log('12this.refs.EcgChart', this.$refs)
			});
		},
		getPatient() {
			getList(
				Object.assign({
					pageNum: 1,
					pageSize: 9
				})
			).then((res) => {
				this.patientList = res.data.records;
				this.list = this.patientList.map((item) => {
					return {
						...item,
						point: [], //113.54897590, 22.35226280
						ecgList: [],
						ecgData: [],
						prevEcgData: [],
						hr: "--",
						batteryValue: 0
					};
				});
				setTimeout(() => {
					this.draw();
				}, 6000);
			});
		},
		getAddr2(cl, wl, patientCode) {
			//this.getWifi(cl, wl)
			request({
				//url: 'http://api.cellocation.com:84/loc/?cl=460,0,9784,22788621,-89;460,0,4183,22389710,-22&wl=D8:3D:CC:82:09:FE,-63;30:42:40:A2:02:AA,-65&output=json',
				url: "http://api.cellocation.com:84/loc/?cl=" + cl + "&wl=" + wl + "&output=json",
				method: "get"
			}).then((da) => {
				if (da.errcode == 0) {
					this.list.forEach((item) => {
						if (item.patientCode == patientCode) {
							item.point = [da.lon, da.lat];
						}
					});
				}
			});
		},
		getAddr(deviceInfo, patientCode) {
			let timestamp = new Date().getTime();
			let cellulars = deviceInfo.lbs.split(",");
			let wifilist = deviceInfo.wifi.split("#");
			let wifis = wifilist.map((item) => {
				let ary = item.split("!");
				return {
					signalStrength: Math.abs(ary[1]),
					macAddress: ary[0]
				};
			});
			request({
				url: "https://api.newayz.com/location/hub/v1/track_points?access_key=RgIY4UlmsG91B1BiU7Onrp1OGESqUImo&response_sprf=GCJ02",
				method: "post",
				data: {
					timestamp: timestamp,
					id: deviceInfo.deviceGateWayMac,
					asset: {
						id: patientCode,
						macAddress: deviceInfo.deviceGateWayMac
					},
					location: {
						timestamp: timestamp,
						cellulars: [
							{
								timestamp: timestamp,
								cellId: cellulars[3] - 0,
								// "connected": true,
								signalStrength: Math.abs(cellulars[4]),
								// "radioType": "lte",
								mobileCountryCode: cellulars[0] - 0,
								mobileNetworkCode: cellulars[1] - 0,
								locationAreaCode: cellulars[2] - 0
							}
						],
						wifis: wifis
					}
				}
			}).then((da) => {
				console.log("122", da);
				if (da.location && da.location.position.point) {
					let { latitude, longitude } = da.location.position.point;
					if (latitude && longitude) {
						this.list.forEach((item) => {
							if (item.patientCode == patientCode) {
								item.point = [longitude, latitude];
							}
						});
					}
				}
			});
		},
		// 护理计划
		nursingPlan(info) {
			this.$refs.planModal.handleOpen(info.id, 1);
		},
		// 康复计划
		rehabilitationPlan(info) {
			this.$refs.planModal.handleOpen(info.id, 2);
		}
	}
};
</script>

<style scoped lang="scss">
.flex {
	display: flex;
	align-items: center;
}

.flex-1 {
	flex: 1;
}

.ml10 {
	margin-left: 10px;
}

.wrap {
	background: #030d28;
	height: 100vh;
	width: 100vw;
	display: flex;

	.active {
		display: flex;
		height: 100%;
		transition: all 0.3s;
		overflow: hidden;
		position: relative;

		.item {
			flex: 1;
			margin-top: 10px;
			margin-left: 10px;
			padding: 20px;
		}

		.el-icon-error {
			color: #f00;
			font-size: 30px;
			position: absolute;
			left: calc(50% + 8px);
			top: 0;
			z-index: 999;
			cursor: pointer;
		}
	}

	.map {
		flex: 1;
		height: 100%;
	}

	.pill {
		width: 30px;
	}

	.addr {
		width: 25px;
	}

	.item {
		padding: 10px;
		display: flex;
		flex-direction: column;
		margin-bottom: 10px;
		border: 1px solid rgba(255, 255, 255, 0.3);
		overflow: hidden;
		color: rgba(255, 255, 255, 0.7);
	}

	.item-hd {
		color: #fff;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		cursor: pointer;
		.name {
			font-size: 20px;
			margin-right: 20px;
		}
	}

	.item-bd {
		flex: 1;
		display: flex;
		min-height: 0;
		overflow: hidden;
		margin-top: 20px;

		.ecgbox {
			height: 100%;
			flex: 1;
		}

		.bpm {
			padding: 0 16px 6px;
			color: yellow;
			font-size: 20px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-end;
			width: 100px;

			.num {
				font-size: 40px;
				line-height: 30px;
			}
		}
	}

	.item-ft {
		flex: 1;
		color: #fff;

		table {
			width: 100%;
			text-align: center;
			border-collapse: collapse;

			th,
			td {
				padding: 10px 5px;
			}

			th {
				background: rgba(255, 255, 255, 0.1);
			}
		}
	}

	.list {
		display: flex;
		flex-wrap: wrap;
		padding: 10px;
		height: 100%;
		// width: 100%;
		// justify-content: space-around;
		box-sizing: border-box;
		flex: 1;

		.item {
			cursor: pointer;
			width: calc((100% - 20px) / 3);
			height: calc((100% - 20px) / 3);

			&:nth-child(3n + 2) {
				margin-left: 10px;
				margin-right: 10px;
			}
		}

		&.list-sm {
			.item {
				width: calc((100% - 20px) / 2);
				height: calc((100% - 30px) / 4);

				&:nth-child(3n + 2) {
					margin-left: 0;
					margin-right: 0;
				}
			}
		}

		&.list-xs {
			.item {
				width: 100%;
				height: calc((100% - 70px) / 8);

				&:nth-child(3n + 2) {
					margin-left: 0;
					margin-right: 0;
				}
			}
		}
	}
}

.electricityState {
	// position: absolute;
	// right: 0;
	// top: 160upx;
	.battery-indicator {
		display: flex;
		align-items: center;
	}

	.battery-container {
		--battery-level: 15%;
		display: inline-block;
		position: relative;
		/* width: 60px;
		  height: 30px; */
		width: 34px;
		height: 18px;
		border: 2px solid rgba(255, 255, 255, 0.1);
		border-radius: 3px;
		background: rgba(255, 255, 255, 0.3);
		margin-right: 5px;
	}

	.battery-head {
		position: absolute;
		right: -6px;
		//top: 7px;
		top: 2px;
		width: 4px;
		height: 10px;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 0 2px 2px 0;
	}

	.battery-level {
		position: absolute;
		left: 2px;
		top: 2px;
		bottom: 2px;
		width: var(--battery-level);
		background: #2dc959;
		border-radius: 1px;
	}

	.battery-percent {
		display: inline-block;
		font-family: Arial, sans-serif;
		font-size: 14px;
		vertical-align: middle;
		color: #fff;
		font-weight: bold;
		margin-left: 6px;
		text-align: center;
	}

	.low-battery {
		color: #ff4444;
	}

	/* 低电量样式 */
	.battery-container .battery-level {
		animation: pulse 1.5s infinite;

		&.low-battery {
			background: #ff4444;
		}
	}
}
</style>
<style>
@keyframes pulse {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.6;
	}

	100% {
		opacity: 1;
	}
}
</style>
